<template>
  <div class="person">
    <!--
      TypeScript Vue Plugin (Volar) 设置里 dot.value打勾 可以自动加上.value
      06 ref 对比 reactive

        区别:
          1. ref创建的变量必须用.vaue(可以使用 volar 插件自动添加.value)
          2. reactive重新分配一个新对象,会失去响应式(可以使用Object.assign整体替换)
          3. ref重新分配新对象,直接 obj.a = {} 覆盖即可, 因为 .value后面必是响应式数据

        使用原则:
          1.如果需要一个基本类型的响应式数据,必须用ref
          2.如果需要一个响应式对象,层级不深, ref,reactive都可以
          3.如果需要一个响应式对象,层级较深, 推荐使用reactive
          4.表单也推荐使用reactive

    -->
    <h2>一辆 {{ car.brand }}, 价值{{ car.price }}</h2>
    <button @click="changeBrand">修改品牌</button>
    <button @click="changePrice">修改价格</button>
    <button @click="changeCar">修改骑车</button>
    <hr>
    <h2>当前求和为: {{ sum }}</h2>
    <button @click="changeSum">sum+1</button>
  </div>
</template> 

<script setup lang="ts" name="Pserson234">
import { ref, reactive } from 'vue'

  let car = reactive({
    brand: 'bmw',
    price: 100
  })
  const changePrice = () => {
    car.price += 10
  }
  const changeBrand = () => {
    car.brand ='奔驰'
  }
  const changeCar = () => {
    // 1. 变成普通对象 失去了响应式 不能重新分配对象 不行
    // car = {
    //   brand: '雅迪',
    //   price: 1000
    // }
    // 2. 用reactive重新包裹 也不行
    // car = reactive({
    //   brand: 'bmw',
    //   price: 100
    // })
    // Object.assign(obj1,obj2,obj3) // 把obj2的key-value组合都给obj1,之后再把obj3的key-value组合都给obj1
    Object.assign(car, {
      brand: '雅迪',
      price: 1000
    })
    // 如果数据是用ref定义,那么能直接覆盖
    // ref定义的数据是响应式的, ref.value属性 必是响应式的
    // car.value = {
    //   brand: '雅迪',
    //   price: 1000
    // }
  }
  
  let sum = ref(0)
  const changeSum = () => {
    sum.value += 10
  }
</script>
<style>
.person {
  background-color: blue;
  box-shadow: 0 0 10px;
  padding: 20px;
}
button {
  margin: 0 5px;

}
</style>